<template>
  <div class="srbd">
    <div class="bd">
      <div class="cesaun_container">
        <h3 class="title">
          <p class="line">未来运势</p>
        </h3>
        <div>
          <div>
            <el-form
              :model="form"
              :rules="rules"
              ref="form"
              label-width="120px"
              label-position="right"
            >
              <!-- 姓名 -->
              <el-form-item label="姓名：" prop="name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入姓名"
                  clearable
                  style="width: 450px"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别：" prop="sex">
                <el-radio-group v-model="form.sex">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 生日 -->
              <el-form-item label="生日：" prop="birthday">
                <el-date-picker
                  v-model="birthday"
                  @change="dateBir"
                  type="datetime"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 450px"
                ></el-date-picker>
              </el-form-item>

              <!-- 历法选择 -->
              <el-form-item label="历法：" prop="type">
                <el-radio-group v-model="form.type">
                  <el-radio label="1">阳历</el-radio>
                  <el-radio label="0">农历</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="流派：" prop="type">
                <el-select v-model="form.sect" clearable>
                  <el-option :value="1" label="晚子时日柱算明天"></el-option>
                  <el-option :value="2" label="晚子时日柱算当天"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="测试未来哪一年：" prop="yunshi_year">
                <el-select v-model="form.yunshi_year" clearable>
                  <el-option
                    v-for="(item, index) in years"
                    :value="item"
                    :label="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="语言：" prop="lang">
                <el-radio-group v-model="form.lang">
                  <el-radio label="zh-cn">中文</el-radio>
                  <el-radio label="en-us">英文</el-radio>
                  <el-radio label="zh-tw">繁体</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 太阳时 -->

              <!-- 出生地区 -->
            </el-form>
          </div>
        </div>
        <div style="text-align: center">
          <el-button type="primary" @click="submitForm" style="margin: 20px"
            >立即测算</el-button
          >
        </div>

        <!-- 主体表单 -->
      </div>
      <div>
        <h3 class="title">
          <p class="line">测算简介</p>
        </h3>
        <div style="font-size: 14px; margin: 0 10px 20px 10px">
          <p style="">
            1.缘份居八字算命可查询生辰八字、分析八字五行命理，免费测算八字命运等等，出生日期支持公历和农历测算，测算结果仅供参考。
          </p>
          <p>
            2.八字，即生辰八字，是一个人出生时的干支历日期。年干和年支组成年柱，月干和月支组成月柱，日干和日支组成日柱，时干和时支组成时柱，一共四柱，四个干和四个支共八个字，故又称四柱八字。是算命方法之中最正统的一种。
          </p>
          <p>
            3.中国古代一个时辰等于现在的两个小时，比如午时，即现代时间的11时到13时之间。八字算命只需准确到时辰范围（两个小时之间）即可，不必精确到分钟。
          </p>
        </div>
      </div>
    </div>
    <el-dialog
      title="测算结果"
      :visible.sync="centerDialogVisible"
      width="50%"
      class="dialog_cesuan"
    >
      <div class="bazi_info_yunshi" v-if="result != null">
        <div class="base_info">
          <div class="show">
            <span class="l">缘主姓名:</span>
            <span class="r">{{ result.base_info.name }}</span>
          </div>
          <div class="show">
            <span class="l">出生公历:</span>
            <span class="r">{{ result.base_info.gongli }}</span>
          </div>

          <div class="show">
            <span class="l">星宿信息:</span>
            <span class="r">{{ result.base_info.xingxiu }}</span>
          </div>

          <div class="show">
            <span class="l">年柱纳音:</span>
            <span class="r">{{ result.detail_info.sizhu_info.year.ny }}</span>
          </div>
          <div class="show">
            <span class="l">命卦信息:</span>
            <span class="r"
              >{{ result.base_info.minggua.minggua_name }}卦（{{
                result.base_info.minggua.minggua_fangwei
              }}）</span
            >
          </div>
          <div class="show">
            <span class="l">生肖星座:</span>
            <span class="r">{{ result.base_info.shengxiao }}</span>
          </div>
          <div class="show">
            <span class="l">五行旺度:</span>
            <span class="r">{{ result.base_info.wuxing_wangdu }}</span>
          </div>
          <div class="show">
            <span class="l">五行喜忌:</span>
            <span class="r">{{ result.base_info.wuxing_xiji }}</span>
          </div>
          <div class="show">
            <span class="l">起运信息:</span>
            <span class="r">{{ result.base_info.qiyun }}</span>
          </div>

          <div class="show">
            <span class="l">交运信息:</span>
            <span class="r">{{ result.base_info.jiaoyun_mang }}</span>
          </div>
          <div class="show">
            <span class="l">天干留意:</span>
            <span class="r">{{ result.base_info.tiangan_liuyi }}</span>
          </div>
          <div class="show">
            <span class="l">地支留意:</span>
            <span class="r">{{ result.base_info.dizhi_liuyi }}</span>
          </div>
          <div class="show">
            <span class="l">胎元命身:</span>
            <span class="r"
              >胎息:{{ result.base_info.taixi }}({{
                result.base_info.taixi_nayin
              }}) 胎元:{{ result.base_info.taiyuan }}({{
                result.base_info.taiyuan_nayin
              }}) 命宫:{{ result.base_info.minggong }}({{
                result.base_info.minggong_nayin
              }}) 身宫:{{ result.base_info.shengong }}({{
                result.base_info.shengong_nayin
              }})
            </span>
          </div>
        </div>

        <div class="base_info">
          <div class="details">
            <div class="names">
              <span>喜用神分析：</span>
            </div>
            <div class="des">
              <span class="des_deta"
                >日主天干为【{{ result.base_info.xiyongshen.rizhu_tiangan }}】,
                同类为【{{ result.base_info.xiyongshen.tonglei }}】, 异类为【{{
                  result.base_info.xiyongshen.yilei
                }}】 {{ result.base_info.xiyongshen.qiangruo }}, 以【{{
                  result.base_info.xiyongshen.xiyongshen
                }}】为喜用神 五行统计：
                {{ result.base_info.xiyongshen.jin_number }}金，{{
                  result.base_info.xiyongshen.mu_number
                }}木，{{ result.base_info.xiyongshen.huo_number }}水，{{
                  result.base_info.xiyongshen.huo_number
                }}火，{{ result.base_info.xiyongshen.tu_number }}土，自党：{{
                  result.base_info.xiyongshen.zidang
                }}，异党：{{ result.base_info.xiyongshen.yidang }}</span
              >
              <span
                >五行能量：
                {{ result.base_info.xiyongshen.jin_score }}分，占比{{
                  result.base_info.xiyongshen.jin_score_percent
                }}，{{ result.base_info.xiyongshen.mu_score }}分，占比{{
                  result.base_info.xiyongshen.mu_score_percent
                }}， {{ result.base_info.xiyongshen.shui_score }}分，占比{{
                  result.base_info.xiyongshen.shui_score_percent
                }}，{{ result.base_info.xiyongshen.huo_score }}分，占比{{
                  result.base_info.xiyongshen.huo_score_percent
                }}，{{ result.base_info.xiyongshen.tu_score }}分，占比{{
                  result.base_info.xiyongshen.tu_score_percent
                }}，</span
              >
            </div>
          </div>

          <div class="details">
            <div class="names">
              <span
                >运势年：{{
                  result.detail_info.yunshi_year_info.yunshi_year.year
                }}【{{ result.detail_info.yunshi_year_info.yunshi_year.tg
                }}{{
                  result.detail_info.yunshi_year_info.yunshi_year.dz
                }}年】-----年神煞：{{
                  result.detail_info.yunshi_year_info.yunshi_year.shensha
                }}</span
              >
            </div>
            <div class="des">
              <div class="des_deta">
                <span style="color: blue">[本年事业运势]</span>：{{
                  result.detail_info.yunshi_year_info.yunshi_year.indication
                    .shiye
                }}
              </div>
              <div class="des_deta">
                <span style="color: blue">[本年学业运势]：</span
                >{{
                  result.detail_info.yunshi_year_info.yunshi_year.indication
                    .xueye
                }}
              </div>
              <div class="des_deta">
                <span style="color: blue">[本年运势运势]：</span
                >{{
                  result.detail_info.yunshi_year_info.yunshi_year.indication
                    .yunshi
                }}
              </div>
              <div class="des_deta">
                <span style="color: blue">[本年财运运势]：</span
                >{{
                  result.detail_info.yunshi_year_info.yunshi_year.indication
                    .yinyuan
                }}
              </div>
              <div class="des_deta">
                <span style="color: blue">[本年健康运势]：</span
                >{{
                  result.detail_info.yunshi_year_info.yunshi_year.indication
                    .jiankang
                }}
              </div>
            </div>
          </div>
          <div
            class=""
            v-for="(item, index) in result.detail_info.yunshi_month_info"
            :key="index"
          >
            <div class="details">
              <div class="names">
                <span
                  >运势月：{{ item.month }}【{{ item.tg
                  }}{{ item.dz }}月】月神煞：{{ item.shensha }}</span
                >
              </div>
              <div class="des">
                <div class="des_deta">
                  <span style="color: blue">[本月事业运势]</span>：{{
                    item.indication.shiye
                  }}
                </div>
                <div class="des_deta">
                  <span style="color: blue">[本月学业运势]：</span
                  >{{ item.indication.xueye }}
                </div>
                <div class="des_deta">
                  <span style="color: blue">[本月运势运势]：</span
                  >{{ item.indication.yunshi }}
                </div>
                <div class="des_deta">
                  <span style="color: blue">[本月财运运势]：</span
                  >{{ item.indication.yinyuan }}
                </div>
                <div class="des_deta">
                  <span style="color: blue">[本月健康运势]：</span
                  >{{ item.indication.jiankang }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yl">
          <span>仅供娱乐！请勿当真</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  computed: {
    currentPath() {
      return this.$route.path; // 获取当前路由路径
    },
  },
  data() {
    return {
      centerDialogVisible: false,
      birthday: "",

      result: null,
      area: "",
      years: [],
      form: {
        name: "",
        sect: "",
        type: "1",
        lang: "zh-cn",
        yunshi_year: "",
        sex: "男",
        year: "",
        month: "",
        day: "",

        hours: "",
        minute: "",
      },

      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],

        type: [
          { required: true, message: "请选择历法类型", trigger: "change" },
        ],
        zhen: [
          {
            required: true,
            message: "请选择是否使用太阳时",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    // this.getCurrentDate();
    this.getYear();
    let formBz = JSON.parse(localStorage.getItem("arrangeEightFormStorage"));
    console.log(formBz);
    if (formBz) {
      this.form.name = formBz.name;
      this.form.sex = formBz.sex == 0 ? "男" : "女";
      this.form.type = formBz.isLunar == 0 ? "1" : "0";

      this.form.year = formBz.year;
      this.form.month = formBz.month;
      this.form.day = formBz.day;
      this.form.hours = this.padZero(formBz.hours);
      this.form.minute = this.padZero(formBz.minute);
      this.birthday =
        this.form.year +
        "-" +
        this.form.month +
        "-" +
        this.form.day +
        " " +
        this.form.hours +
        ":" +
        this.form.minute +
        ":00";
    }
  },
  methods: {
    padZero(num) {
      return num.toString().padStart(2, "0");
    },
    getYear() {
      let years = [];
      let date = new Date();
      this.form.yunshi_year = date.getFullYear();
      let nums = 0;
      for (let i = this.form.yunshi_year; nums <= 70; i++) {
        nums += 1;
        years.push(i);
      }
      this.years = years;
    },
    dateBir(val) {
      console.log(val);
      this.birthday = val;

      var date = new Date(val);

      // 获取各部分时间
      var year = date.getFullYear(); // 年（4位）
      var month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月（补零）
      var day = date.getDate().toString().padStart(2, "0"); // 日（补零）
      var hours = date.getHours().toString().padStart(2, "0"); // 时（补零）
      var minutes = date.getMinutes().toString().padStart(2, "0"); // 分（补零）

      this.form.year = year;
      this.form.month = month;
      this.form.day = day;
      this.form.hours = hours;
      this.form.minute = minutes;
    },

    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 这里处理提交逻辑
          if (!this.birthday) {
            this.$message.error("请选择生日");
            return false;
          }

          this.form["api_key"] = "FNcQHQuf0W8wDrXMjWc0xqTzw";
          let config = {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          };
          this.$axios
            .post(window.config.apiUrl + "/v1/Bazi/weilai", this.form, config)
            .then((res) => {
              if (res.data.errcode == -1) {
                this.$message({
                  type: "warning",
                  message: res.data.errmsg,
                });

                return;
              }

              this.result = res.data.data;
              this.centerDialogVisible = true;
              console.log(this.result);
            });
        } else {
          this.$message.error("请完善表单信息");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
@mixin flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  height: 45px;
}

@mixin tr1_w {
  width: 33px;
  text-align: center;
}

text {
  user-select: all;
}

.dialog_cesuan {
  margin-top: 0 !important;
  overflow: hidden;

  .bazi_info_yunshi {
    height: calc(100vh - 100px);
    overflow: auto;

    .base_info {
      margin: 20px;

      .title {
        display: flex;
        padding: 5px;

        .shu {
          width: 5px;
          height: 20px;
          background-color: #e6a84b;
          border-radius: 10px;
        }

        .ti {
          padding-left: 8px;
          font-weight: 800;
          font-size: 15px;
        }
      }

      .show {
        margin-top: 15px;

        .l_ {
          font-size: 14px;
          display: inline-block;
          min-width: 50px;
          font-weight: 800;
        }

        .l {
          font-size: 15px;
          display: inline-block;
          min-width: 80px;
          font-weight: 800;
        }
      }

      .details {
        border: 1px solid #e5e5e5;
        border-bottom: none;
        margin-top: 20px;

        .names {
          text-align: center;
          color: #e6a84b;
          border-bottom: 1px solid #e5e5e5;
          color: #e6a84b;
          font-size: 28rpx;
          background-color: #fff3ef;
          padding: 15px;
        }

        .des {
          border-bottom: 1px solid #e5e5e5;
          padding-left: 10px;

          align-items: center;

          .des_text {
            color: #e6a84b;
            width: 14%;
            font-weight: 800;
            user-select: text;
          }

          .des_deta {
            width: 100%;
            line-height: 26px;
            text-indent: 2em;
            user-select: text;
          }
        }
      }
    }
  }
}
</style>